<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录和注册</title>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 80%;
            max-width: 800px;
        }

        .form-box {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 45%;
        }

        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
        }

        input[type="text"],
        input[type="password"],
        button {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border-radius: 4px;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        button {
            background-color: #007bff;
            color: #fff;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        hr {
            margin: 20px 0;
        }
    </style>

</head>
<body>

<div class="container">
    <div class="form-box">
        <h1>统一身份用户登录</h1>
        <div>
            <label for="loginName">用户名:</label>
            <input type="text" id="loginName">
        </div>
        <div>
            <label for="loginPassword">密码:</label>
            <input type="password" id="loginPassword">
        </div>
        <button onclick="login()">登录</button>
    </div>








    <div class="form-box">
        <h1>用户注册</h1>
        <div>
            <label for="registerName">用户名:</label>
            <input type="text" id="registerName">
        </div>
        <div>
            <label for="registerPassword">密码:</label>
            <input type="password" id="registerPassword">
        </div>
        <button onclick="register()">注册</button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const BASE_URL = 'http://localhost:8888'; // Replace with your server URL

    function register() {
        const name = $('#registerName').val();
        const password = $('#registerPassword').val();

        $.ajax({
            url: `${BASE_URL}/user/register`,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ name, password }),
            success: function(response) {
                alert(response.msg);
            },
            error: function(error) {
                alert('Registration failed. Please try again.');
            }

        });
    }

    function login() {
        const name = $('#loginName').val();
        const password = $('#loginPassword').val();

        $.ajax({
            url: `${BASE_URL}/user/login`,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ name, password }),
            success: function(response) {
                alert(response.msg);

            },
            error: function(error) {
                alert('Login failed. Please check your credentials.');
            }
        });
    }
</script>
</body>
</html>
